import React, { FC, useContext } from 'react';
import { Style } from './swiper.style';
import { Context } from './_swiper';
import { Animated, View } from 'react-native';

export const Indicator: FC<{}> = () => {
  const indicatorTotal = useContext(Context);
  const translationX = new Animated.Value(0);

  return (
    <Animated.View
      style={[
        Style.indicatorWrapStyle,
        {
          transform: [
            {
              translateX: translationX,
            },
          ],
        },
      ]}
      onLayout={event => {
        translationX.setValue(-event.nativeEvent.layout.width / 2);
      }}>
      {new Array(indicatorTotal.pageTotal - 4)
        .fill(undefined)
        .map((_, index) => {
          return (
            <View key={index} style={[Style.indicatorStyle]}>
              <Animated.View
                style={[
                  Style.innerIndicatorStyle,
                  { opacity: indicatorTotal.opacityAminatedList[index] },
                ]}
              />
            </View>
          );
        })}
    </Animated.View>
  );
};
